import { useState } from 'react'

import { Button, Modal, Form, Input, message } from 'antd';
const BaseLogin = () => {
    const [count, setLogin] = useState(false);

    const onFinish = (values) => {
        console.log('Success:', values);

        window.localStorage.setItem('token', JSON.stringify(values))
        const token = JSON.parse(localStorage.token)
        console.log(token);
        if (token) {
            setLogin(false)
            message.info('登录成功');
        }
    };
    return (
        <div>
            <Button type="primary" onClick={() => setLogin(true)}>登录</Button>
            <Modal
                visible={count}
                onCancel={() => setLogin(false)}
                footer
            >
                <h3>登录</h3>
                <Form

                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="Username"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>


        </div >
    )
}

export default BaseLogin